{% extends app.request.isXmlHttpRequest ? "PopshouseSiteBundle::blank.html.twig" : "PopshouseSiteBundle::layout.html.twig" %}

{% block title %}{{ parent() }} - {{ "head.title" | trans({},"about") | raw }}{% endblock %}

{% block content %}
<div class="content">
        
        <div class="intro" style="height:140px;">
                <figure>
                <div class="left slideshow NoJs" style="width:24%;overflow:hidden;">
                    <a href="{{ asset('images/photo/about/slide1_large.jpg') }}" target="_blank"><img src="{{ asset('images/photo/about/slide1_small.jpg') }}" alt="{{ "image.horses" | trans({},"about") | raw }}" class="NoJs" /></a>
                </div>
                <div class="left slideshow JsOnly" style="width:24%;">
                    <a href="{{ asset('images/photo/about/slide1_large.jpg') }}" rel="side[gal1]"><img src="{{ asset('images/photo/about/slide1_small.jpg') }}" alt="{{ "image.horses" | trans({},"about") | raw }}" /></a>
                    <a href="{{ asset('images/photo/about/slide2_large.jpg') }}" rel="side[gal1]"><img src="{{ asset('images/photo/about/slide2_small.jpg') }}" alt="{{ "image.redroom" | trans({},"about") | raw }}"  /></a>
                    <a href="{{ asset('images/photo/about/slide3_large.jpg') }}" rel="side[gal1]"><img src="{{ asset('images/photo/about/slide3_small.jpg') }}" alt="{{ "image.gastvrouw" | trans({},"about") | raw }}"  /></a>
                    <a href="{{ asset('images/photo/about/slide4_large.jpg') }}" rel="side[gal1]"><img src="{{ asset('images/photo/about/slide4_small.jpg') }}" alt="{{ "image.verblijf" | trans({},"about") | raw }}"  /></a>
                    <a href="{{ asset('images/photo/about/slide5_large.jpg') }}" rel="side[gal1]"><img src="{{ asset('images/photo/about/slide5_small.jpg') }}" alt="{{ "image.ezels" | trans({},"about") | raw }}"  /></a>
                </div>
                </figure>
                <div class="right" style="width:71%;">
                    <section>
                        <h1>{{ "head.title" | trans({},"about") | raw }}</h1>
                        <p>{{ "head.text" | trans({},"about") | raw }}</p>
                    </section>
                 </div>
             </div>
             <hr />
             <article>
             <h1 class="subtitle">{{ "details.title" | trans({},"about") | raw }}</h1>
            <div class="scrollbox" style="height:385px;">
            <p>{{ "details.intro" | trans({},"about") | raw }}</p>
           
    {% include "PopshouseSiteBundle:Index:side_img.html.twig" %}
           <div class="sideR" style="width:{{page.contentWidth}}%">
	            <section>
		            <h2>{{ "details.subtitle1" | trans({},"about") | raw }}</h2>
		            <p>{{ "details.text1" | trans({},"about") | raw }}</p>
	            </section>
	            <section>
		            <h2>{{ "details.subtitle2" | trans({},"about") | raw }}</h2>
		            <p>{{ "details.text2" | trans({},"about") | raw }}</p>
	            </section>
	            <section>
		            <h2>{{ "details.subtitle3" | trans({},"about") | raw }}</h2>
		            <p>{{ "details.text3" | trans({},"about") | raw }}</p>
	            </section>
	            <section>
		            <h2>{{ "details.subtitle4" | trans({},"about") | raw }}</h2>
		            <p>{{ "details.text4" | trans({},"about") | raw }}</p>
	            </section>          
            </div>
            </div>
            </article>
         {% include "PopshouseSiteBundle::arrows.html.twig" %}
        </div>
{% endblock %}